<template>
  <div class="resource-group">
    <div v-for="(item, index) in resourceInfo" :key="index" class="resource-list">
      <div v-if="!showMobilePage" class="resource-list-header">
        <div class="rules-content">
          <Title :title="item.resourceName" font-size="16px" />
          <p class="create-rule">已创建 <span>{{ item.total || 0 }}</span> 个计算规则</p>
          <div class="line mr9 ml9"/>
          <p class="create-rule">已关联 <span>{{ item.resourceNum || 0 }}</span> 个资源</p>
        </div>
        <div v-if="!isModify" class="setting-btn">
          <el-dropdown trigger="click">
            <el-button class="el-dropdown-link search-btn-style more-btn">更多操作</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :disabled="!hasRouteAuth('medium:supplier:ruleEdit') || createdDisable || isDisabled">
                <span type="primary" class="search-btn-style" style="width: 80px;padding: 7px 10px;" @click="ruleAdd(item.id)">添加规则</span>
              </el-dropdown-item>
              <el-dropdown-item :disabled="!hasRouteAuth('medium:supplier:resourceEdit') || createdDisable || isDisabled">
                <span class="search-btn-style" style="width: 80px;padding: 7px 10px;" @click="batchAdd(item.id)">批量添加</span>
              </el-dropdown-item>
              <el-dropdown-item :disabled="!hasRouteAuth('medium:supplier:resourceRead') || createdDisable || isDisabled">
                <span class="search-btn-style" style="width: 80px;padding: 7px 10px;" @click="resourceList(item.id)">资源管理</span>
              </el-dropdown-item>
              <el-dropdown-item :disabled="!hasRouteAuth('medium:supplier:resourceEdit') || createdDisable || isDisabled" style="text-align:center" >
                <span @click="delResource(item.id)">删除</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <PlainCreateBtn :disabled="!hasRouteAuth('medium:supplier:resourceRead') || createdDisable || isDisabled" style="margin-left:17px" @click="resourceAdd(item.id)">添加资源</PlainCreateBtn>
        </div>
      </div>
      <div v-else class="resource-list-header-mobile">
        <Title :title="item.resourceName" font-size="16px" />
        <div class="rules-content" style="justify-content: flex-start;margin-top: 8px;">
          <div class="create-rule-box">
            <div class="create-rule">已创建 <span>{{ item.total || 0 }}</span> 个计算规则</div>
            <div class="create-rule-line" />
            <div class="create-rule">已关联 <span>{{ item.resourceNum || 0 }}</span> 个资源</div>
          </div>
        </div>
        <div class="setting-btn">
          <el-dropdown trigger="click">
            <el-button class="el-dropdown-link search-btn-style more-btn">更多操作</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :disabled="!hasRouteAuth('medium:supplier:ruleEdit') || createdDisable || isDisabled">
                <span type="primary" class="search-btn-style" style="width: 80px;padding: 7px 10px;" @click="ruleAdd(item.id)">添加规则</span>
              </el-dropdown-item>
              <el-dropdown-item :disabled="!hasRouteAuth('medium:supplier:resourceEdit') || createdDisable || isDisabled">
                <span class="search-btn-style" style="width: 80px;padding: 7px 10px;" @click="batchAdd(item.id)">批量添加</span>
              </el-dropdown-item>
              <el-dropdown-item :disabled="!hasRouteAuth('medium:supplier:resourceRead') || createdDisable || isDisabled">
                <span class="search-btn-style" style="width: 80px;padding: 7px 10px;" @click="resourceList(item.id)">资源管理</span>
              </el-dropdown-item>
              <el-dropdown-item :disabled="!hasRouteAuth('medium:supplier:resourceEdit') || createdDisable || isDisabled" style="text-align:center" >
                <span @click="delResource(item.id)">删除</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <PlainCreateBtn :disabled="!hasRouteAuth('medium:supplier:resourceRead') || createdDisable || isDisabled" style="margin-left:17px" @click="resourceAdd(item.id)">添加资源</PlainCreateBtn>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        v-if="hasRouteAuth('medium:supplier:ruleRead') && item.items.length > 0"
        :data="item.items"
        :show-header="false"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        border
        fit
        hightlight-current-row
        max-height="300px"
        class="table-list-box">
        <el-table-column align="center" class-name="rule-name">
          <template slot-scope="scope">
            <div class="rule-name">{{ scope.row.name || '--' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <template slot-scope="scope">
            <div>公式：{{ scope.row.formula || '无' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <template slot-scope="scope">
            <div>条件：{{ scope.row.condition || '无' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="110">
          <template slot-scope="scope">
            <div class="remark">
              备注：{{ scope.row.remark || '--' }}
              <img :src="isDisabled ? editDisabled : edit" :class="!isDisabled || 'remark-edit-disabled'" alt="edit" @click="remarkEdit(scope, item)">
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="!isModify" align="center" min-width="110">
          <template slot-scope="scope">
            <el-button :disabled="!hasRouteAuth('medium:supplier:ruleEdit') || createdDisable || isDisabled" type="text" size="small" @click="toEdit(scope, item)">编辑</el-button>
            <el-button :disabled="!hasRouteAuth('medium:supplier:ruleEdit') || createdDisable || isDisabled" type="text" size="small" @click="toDel(scope, item)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <empty-placeholder v-else danger-html-render text="<div style='margin-top:-30px;'>请添加规则</div>" style="margin-bottom: 24px" />
    </div>
    <BatchAddDialog :dialog-visible="dialogVisible" :resource-group-id="resourceGroupId" :resource-detail="resourceDetail" @closeDialog="closeDialog"/>
    <RuleDialog :rule-visible="ruleVisible" :resource-group-id="resourceGroupId" :rule-id="ruleId" @ruleClose="ruleClose"/>
    <ResourceDialog
      :id="id"
      :resource-visible="resourceVisible"
      :resource-group-id="resourceGroupId"
      :resource-type="resourceType"
      :show-mobile-page="showMobilePage"
      @changeType="changeType"
      @resourceDialog="resourceDialog"
      @updateData="updateData"/>
    <editMask ref="editInfoMask" :show-mobile-page="showMobilePage" input-type="textarea" @handelOk="handelEdit" />
  </div>
</template>
<script>
import edit from '@/assets/edit.png';
import editDisabled from '@/assets/editDisabled.png';
import Title from '@/components/Title';
import editMask from '@/components/MediumPage/order/editPriceMask';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import BatchAddDialog from './batchAddDialog';
import ResourceDialog from './resourceDialog';
import RuleDialog from './ruleDialog';
import { resourceRemarkEdit, ruleDel, resourceGroupDel } from '@/api/supplier';
import { hasRouteAuth } from '@/utils/permission';
export default {
  components: {
    Title,
    editMask,
    EmptyPlaceholder,
    BatchAddDialog,
    ResourceDialog,
    RuleDialog
  },
  props: {
    id: {
      type: Number,
      default: null
    },
    resourceInfo: {
      type: Array,
      default: () => {
        return [];
      }
    },
    resourceDetail: {
      type: Function,
      default: null
    },
    createdDisable: { // 新建页面编辑限制 true不允许编辑，false允许编辑
      type: Boolean,
      default: false
    },
    isDisabled: { // 在详情页面中点击编辑按钮切换为编辑时资源，规则，备注相关按钮 true不允许编辑
      type: Boolean,
      default: false
    },
    showMobilePage: {
      type: Boolean,
      default: false
    },
    isModify: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      edit,
      editDisabled,
      listLoading: false,
      resourceGroupId: null,
      dialogVisible: false,
      resourceVisible: false,
      resourceType: null,
      ruleVisible: false,
      ruleId: null
    };
  },
  methods: {
    hasRouteAuth,
    // 修改规则备注
    remarkEdit(scope, item) {
      if (this.isDisabled) return false;
      if (!hasRouteAuth('medium:supplier:ruleEdit')) {
        this.$confirm('您暂无供应商规则备注修改权限，请到用户管理-权限管理进行设置或联系管理员', '', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false,
          center: true,
          iconClass: 'charge-icon',
          customClass: 'del-message del-message-cancel'
        }).catch(() => {
          return false;
        });
      } else {
        this.resourceGroupId = item.id;
        this.$refs.editInfoMask.toEditRemarks(scope.row, scope.row.remark, '备注', 1);
      }
    },
    handelEdit({ data, key, value }) {
      if (value !== '' && value.length > 500) {
        this.$message({ type: 'warning', message: '请输入小于500个字的备注' });
        return;
      }
      const params = {
        remark: value
      };
      resourceRemarkEdit(data.id, params).then(res => {
        this.$message.success('修改成功');
        this.$emit('updateData', this.resourceGroupId);
        this.$refs.editInfoMask.init();
      });
    },
    // END
    // 批量添加
    batchAdd(id) {
      this.dialogVisible = true;
      this.resourceGroupId = id;
    },
    closeDialog(val) {
      this.dialogVisible = val;
      this.$emit('updateResource');
    },
    // END
    // 关联资源
    resourceAdd(id) {
      this.resourceVisible = true;
      this.resourceType = 0;
      this.resourceGroupId = id;
    },
    changeType(val) {
      this.resourceType = val;
    },
    resourceDialog() {
      this.resourceVisible = false;
    },
    resourceList(id) {
      this.resourceVisible = true;
      this.resourceType = 1;
      this.resourceGroupId = id;
    },
    updateData(val) {
      this.$emit('updateResource');
    },
    // END
    // 删除资源管理组
    delResource(id) {
      this.$confirm('【资源组】删除后，取消资源与供应商关联关系？', '', {
        confirmButtonText: '确认删除',
        cancelButtonText: '再想想',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        resourceGroupDel(id).then(res => {
          this.$message.success('删除成功');
          this.$emit('updateResource');
        }).catch(err => {
          console.error(err);
        });
      }).catch(() => {
        return false;
      });
    },
    toDel(scope, item) {
      this.resourceGroupId = item.id;
      this.$confirm('是否确定删除该规则？', '', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        ruleDel(scope.row.id).then(res => {
          this.$message.success('删除成功');
          this.$emit('updateData', this.resourceGroupId);
        }).catch(err => {
          console.error(err);
        });
      }).catch(() => {
        return false;
      });
    },
    // 新增编辑规则
    ruleAdd(id) {
      if (this.createdDisable || this.isDisabled) return false;
      this.ruleVisible = true;
      this.ruleId = null;
      this.resourceGroupId = id;
    },
    ruleClose(val, resourceGroupId) {
      this.ruleVisible = val;
      if (resourceGroupId) {
        this.$emit('updateData', resourceGroupId);
      }
    },
    toEdit(scope, item) {
      this.ruleVisible = true;
      this.ruleId = scope.row.id;
      this.resourceGroupId = item.id;
    }
  }
};
</script>
<style lang="scss" scoped>
.resource-group {
    .line{
    width: 0px;
    height: 14px;
    border: 1px solid #DDDDDD;
    opacity: 1;
  }
  .resource-list {
    background-color: #fff;
    max-height: 400px;
    margin-bottom: 32px;
    .resource-list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      .rules-content {
        display: flex;
        justify-content: center;
        align-items: center;
        .create-rule {
          margin: 0 12px;
          color: #999;
          font-size: 14px;
          span {
            color: #333;
          }
        }
        .create-btn {
          display: flex;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          margin-left: 16px;
          width:100px;
          height:32px;
          background:rgba(64,110,255,1);
          border-radius:4px;
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,1);
          line-height:14px;
        }
      }
      .setting-btn {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .relate-resource {
          margin: 0 12px;
          color: #999;
          font-size: 14px;
          span {
            color: #333;
          }
        }
        .more-btn{
          width: 80px;
          height: 32px;
          padding: 0;
          font-size: 14px;
        }
        .back-btn {
          width: 80px;
          height: 32px;
          font-size: 14px;
          color: #406EFF;
          padding: 7px;
          background: #EFF3FB;
          border: none;
        }
      }
    }
    .table-list-box {
      color: #666;
      &::v-deep {
        .el-table__row:nth-of-type(2n+1) {
          .rule-name {
            background: #FBFBFD;
          }
        }
      }
      .remark {
        display: flex;
        justify-content: center;
        align-items: center;
        .remark-edit-disabled {
          cursor: not-allowed;
        }
        img {
          width: 16px;
          height: 16px;
          margin-left: 4px;
          cursor: pointer;
        }
      }
    }
  }
  .resource-list-header-mobile {
    .rules-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .create-rule-box {
        display: flex;
        .create-rule {
          margin: 0 5px;
          color: #999;
          font-size: 14px;
          span {
            color: #333;
          }
        }
        .create-rule-line {
          width: 2px;
          height: 14px;
          margin-top: 3px;
          background-color: #DDDDDD;
        }
      }
    }
    .setting-btn {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 10px 0;
      .more-btn{
        width: 80px;
        height: 32px;
        padding: 0;
        font-size: 14px;
      }
    }
  }
}
</style>
